<script setup lang="ts">
import type { MateForm } from '@/type/common/list-types'
import { operatorList } from '@/components/common/common'
import SDatePicker from '@/components/common/SDatePicker.vue'
import SSelect from '@/components/common/SSelect.vue'

const props = defineProps<{
  mate: MateForm
  form: any
}>()
</script>

<template>
  <el-input
    v-if="mate.type == 'text'"
    :style="mate.width !== undefined ? { width: mate.width + 'px' } : ''"
    :placeholder="mate.placeholder"
    v-model="props.form![mate.property].value"
  >
    <template #prepend>
      <el-select
        default-first-option
        v-model="props.form![mate.property].operator"
        :disabled="mate.operator === undefined || mate.operator.length <= 1"
        placeholder="Select"
        style="width: 105px"
      >
        <template v-if="mate.operator === undefined || mate.operator.length === 0">
          <el-option label="等于" value="EQ" />
        </template>
        <template v-else>
          <template v-for="it in operatorList" :key="it.value">
            <el-option
              :disabled="mate.operator?.length <= 1"
              v-if="mate.operator?.find((op) => op == it.value) !== undefined"
              :label="it.label"
              :value="it.value"
            />
          </template>
        </template>
      </el-select>
    </template>
  </el-input>

  <s-select v-else-if="mate.type == 'select'" v-model="props.form![mate.property]" :placeholder="mate.placeholder!" :operator="mate.operator" :codes="mate.codes" />

  <s-date-picker
    v-else-if="mate.type == 'date' || mate.type == 'datetime' || mate.type == 'time'"
    v-model="props.form![mate.property]"
    :type="mate.type"
    :operator="mate.operator"
  />

  <el-input
    v-else-if="mate.type == 'number'"
    :style="mate.width !== undefined ? { width: mate.width + 'px' } : ''"
    :placeholder="mate.placeholder"
    :formatter="(v1: string) => `${v1}`.replace(/[^0-9.]/g, '')"
    v-model="props.form![mate.property].value"
  >
    <template #prepend>
      <el-select
        v-model="props.form![mate.property].operator"
        :disabled="mate.operator === undefined || mate.operator.length <= 1"
        placeholder="Select"
        style="width: 105px"
      >
        <template v-if="mate.operator === undefined">
          <el-option label="等于" value="EQ" />
        </template>
        <template v-else>
          <template v-for="it in operatorList" :key="it.value">
            <el-option
              :disabled="mate.operator?.length <= 1"
              v-if="mate.operator?.find((op) => op == it.value) !== undefined"
              :label="it.label"
              :value="it.value"
            />
          </template>
        </template>
      </el-select>
    </template>
  </el-input>
</template>

<style scoped></style>
